<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{foo}} </p>
        <button v-on:click="foo = 'baz'">change it</button>
    </div>
    <div id="example"></div>
    <script>
        // -------------------------数据与方法---------------------
        // ---------1---------
        var data = {a: 1}
        var vm = new Vue({
            data: data
        })
        console.log(vm.a == data.a) // true
        vm.a = 10
        console.log(data.a) // 10
        // 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的
        vm.b = 'hi'
        console.log(data.b) // undefined
        console.log(vm.b) // 'hi'
        // ----------2---------
        var obj = {
            foo: 'bar'
        }
        Object.freeze(obj) // 阻止修改现有的property, read-only
        new Vue({
            el: '#app',
            data: obj
        })
        // ---------3---------
        var data = {a: 1}
        var vm = new Vue({
            el: '#example',
            data: data
        })
        console.log(vm.$data == data) // true
        console.log(vm.$el == document.getElementById("example")) // true
        // $watch 是一个实例方法
        // 这个回调将在 `vm.a` 改变后调用
        vm.$watch('a', function(newValue, oldValue){})
    </script>
</body>
</html>